<template>
  <div id="app">
    <bpmn-modeler
      ref="refNode"
      :xml="xml"
      :users="users"
      :groups="groups"
      :categorys="categorys"
      :exps="exps"
      :is-view="false"
      @save="save"
      @showXML="showXML"
    />
    <!--在线查看xml-->
    <el-drawer
      :title="xmlTitle"
      :modal="false"
      direction="rtl"
      :visible.sync="xmlOpen"
      size="60%"
    >
      <!-- 设置对话框内容高度 -->
      <el-scrollbar>
        <pre v-highlight="xmlData"><code class="xml"></code></pre>
      </el-scrollbar>
    </el-drawer>
  </div>
</template>

<script>
import bpmnModeler from "@/components/Process/index";
import vkBeautify from "vkbeautify";
import hljs from "highlight.js";
import "highlight.js/styles/atelier-savanna-dark.css";
import http from "@/utils/request";
export default {
  name: "Model",
  components: {
    bpmnModeler,
    vkBeautify,
  }, // 自定义指令
  directives: {
    deep: true,
    highlight: {
      deep: true,
      bind: function bind(el, binding) {
        const targets = el.querySelectorAll("code");
        let target;
        let i;
        for (i = 0; i < targets.length; i += 1) {
          target = targets[i];
          if (typeof binding.value === "string") {
            target.textContent = binding.value;
          }
          hljs.highlightBlock(target);
        }
      },
      componentUpdated: function componentUpdated(el, binding) {
        const targets = el.querySelectorAll("code");
        let target;
        let i;
        for (i = 0; i < targets.length; i += 1) {
          target = targets[i];
          if (typeof binding.value === "string") {
            target.textContent = binding.value;
            hljs.highlightBlock(target);
          }
        }
      },
    },
  },
  data() {
    return {
      xml: "", // 后端查询到的xml
      modeler: "",
      xmlOpen: false,
      xmlTitle: "",
      xmlData: "",
      users: [],
      groups: [],
      categorys: [],
      exps: [],
      isIFrame: false, //是否是iframe嵌套使用
    };
  },
  created() {
    // const deployId = this.$route.query && this.$route.query.deployId;
    // //  查询流程xml
    // if (deployId) {
    //   this.getXmlData(deployId);
    // }
    // this.getDicts("sys_process_category").then((res) => {
    //   this.categorys = res.data;
    // });
    // this.getDataList();

    //模拟用户
    let userArray = [];
    let roleArray = [];
    let categoryArray = [];
    let expsArray = [];
    for (var i = 1; i <= 10; i++) {
      userArray.push({
        userId: "" + i,
        userName: "用户" + i,
        nickName: "昵称" + i,
        phonenumber: "1341953528" + i,
        dept: {
          deptId: "1",
          deptName: "部门1",
        },
      });
    }
    for (var i = 1; i <= 10; i++) {
      roleArray.push({
        roleId: "" + i,
        roleName: "角色" + i,
        roleKey: "role" + i,
        roleSort: i,
        createTime: "2024-06-06",
      });
    }
    for (var i = 1; i <= 10; i++) {
      categoryArray.push({
        dictValue: "" + i,
        dictLabel: "分类" + i,
      });
    }
    for (var i = 1; i <= 10; i++) {
      categoryArray.push({
        dictValue: "" + i,
        dictLabel: "分类" + i,
      });
    }

    for (var i = 1; i <= 10; i++) {
      expsArray.push({
        id: i,
        name: "表达式" + i,
        expression: "${user}",
      });
    }
    this.users = userArray;
    this.groups = roleArray;
    this.categorys = categoryArray;
    this.exps = expsArray;
  },
  mounted() {
    //监听初始化事件
    /**
     * {
     *   type:"flowable",
     *   params:{ xml: 'xxx', users:[],groups:[],exps:[],categorys }
     * }
     *
     */
    let that = this;
    window.addEventListener("message", (event) => {
      console.log("流程设计子页面间听到父页面投递消息,内容如下:");
      console.log(event); //
      if (event.data.type == "flowable_init") {
        let data = event.data.params;
        that.isIFrame = true;
        that.users = data.users;
        that.groups = data.groups;
        that.categorys = data.categorys;
        that.exps = data.exps;
        that.xml = data.xml;
      }
    });

    this.getUser();
  },
  methods: {
    getUser() {
      http.get({
        url:"http://localhost:8088/api/system/user/list?pageIndex=1&pageSize=10",
        params:{},
        callback:(res)=>{
          console.log("res",res);
        }

      });
    },

    /** 保存xml */
    save(data) {
      const params = {
        name: data.process.name,
        category: data.process.category,
        xml: data.xml,
      };
      console.log("保存流程信息--->");
      console.log(params);
      if (this.isIFrame) {
        window.top.postMessage({
          type: "flowable_saveXml",
          params: params,
        });
      }
    },

    /** 展示xml */
    showXML(xmlData) {
      this.xmlTitle = "xml查看";
      this.xmlOpen = true;
      this.xmlData = vkBeautify.xml(xmlData);
    },
  },
};
</script>

<style lang="scss" scoped>
.content-box {
  line-height: 10px;
}
// 修改对话框高度
.showAll_dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  ::v-deep .el-dialog {
    margin: 0 auto !important;
    height: 80%;
    overflow: hidden;
    background-color: #ffffff;
    .el-dialog__body {
      position: absolute;
      left: 0;
      top: 54px;
      bottom: 0;
      right: 0;
      z-index: 1;
      overflow: hidden;
      overflow-y: auto;
      // 下边设置字体，我的需求是黑底白字
      color: #ffffff;
      padding: 0 15px;
    }
  }
}
</style>
